<template>
  <!-- 我的淘宝 -->
  <div class="mytaobaobox">
    <!-- 头部 -->
    <div class="top">
      <div class="head">
        <div class="head_box">
          <img src="@/assets/images/index/logo.png" alt />
        </div>
        <div class="name">
          <p @click="nameinf==null ? getLogin() : ''">{{nameinf==null ? '请登录' : nameinf}}</p>
          <span>
            <van-icon name="contact" />
            <van-icon name="setting-o" />
          </span>
        </div>
        <div class="nav">
          <ul>
            <li>
              <!-- <p>12</p> -->
              <span>收藏夹</span>
            </li>
            <li>
              <!-- <p>32</p> -->
              <span>关注店铺</span>
            </li>
            <li>
              <!-- <p>44</p> -->
              <span>足迹</span>
            </li>
            <li>
              <!-- <p>78</p> -->
              <span>红包卡卷</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 我的订单 -->
    <div class="conter">
      <div class="conter_h">
        <span>我的订单</span>
        <p>查看全部订单 ></p>
      </div>
      <div class="conter_c">
        <ul>
          <li v-for="item in list" :key="item.img">
            <img :src="item.img" alt />
            <span>{{item.title}}</span>
          </li>
        </ul>
      </div>

      <div class="conter_f">
        <!-- 物流 -->
        <div class="logistics">
          <span>最新物流</span>
          <p>08-03</p>
        </div>
        <div class="logistics_f">
          <img src="@/assets/images/index/logo.png" alt />
          <span>商品已下单</span>
        </div>
      </div>
    </div>
    <!-- 工具 -->
    <div class="footer">
      <div class="tool">
        <span>必备工具</span>
        <p>查看全部工具 ></p>
      </div>
      <div class="tool_c">
        <ul>
          <li v-for="item in tool" :key="item.img">
            <img :src="item.img" alt />
            <span>{{item.title}}</span>
          </li>
        </ul>
        <ul>
          <li v-for="item in tool2" :key="item.img">
            <img :src="item.img" alt />
            <span>{{item.title}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import indexApi from "@/api/indexApi.js"; //引入接口
import { getToken, getUser } from "@/utils/auth"; //引入cookie设置的相关方法
export default {
  data() {
    return {
      active: "home",
      nameinf: null,
      list: [
        {
          img: require("@/assets/images/mytaobao/order1.webp"),
          title: "代付款"
        },
        {
          img: require("@/assets/images/mytaobao/order2.webp"),
          title: "代发货"
        },
        {
          img: require("@/assets/images/mytaobao/order3.webp"),
          title: "代收货"
        },
        {
          img: require("@/assets/images/mytaobao/order4.webp"),
          title: "评价"
        },
        {
          img: require("@/assets/images/mytaobao/order5.webp"),
          title: "退款/售后"
        }
      ],
      tool: [
        {
          img: require("@/assets/images/mytaobao/tool1.webp"),
          title: "每日返现"
        },
        {
          img: require("@/assets/images/mytaobao/tool2.webp"),
          title: "领券中心"
        },
        {
          img: require("@/assets/images/mytaobao/tool3.webp"),
          title: "置换金钱"
        },
        {
          img: require("@/assets/images/mytaobao/tool4.webp"),
          title: "客服小蜜"
        }
      ],
      tool2: [
        {
          img: require("@/assets/images/mytaobao/tool5.webp"),
          title: "花呗"
        },
        {
          img: require("@/assets/images/mytaobao/tool6.webp"),
          title: "我的快递"
        },
        {
          img: require("@/assets/images/mytaobao/tool7.webp"),
          title: "我的评价"
        },
        {
          img: require("@/assets/images/mytaobao/tool8.webp"),
          title: "主题换肤"
        }
      ]
    };
  },

  components: {},

  methods: {
    getLogin() {
      this.$router.push({ name: "Login" });
    }
  },

  created() {
    this.nameinf = JSON.parse(getUser()).username || "";
    console.log(this.nameinf);
  }
};
</script>

<style scoped lang="scss">
/* 头部 */

.mytaobaobox {
  font-size: 12px;
}
.top {
  height: 170px;
  width: 100%;
  background-image: linear-gradient(-90deg, #ff5000 0%, #ff8400 100%);

  .head {
    height: 100%;
    width: 100%;
    position: relative;
    .head_box {
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      overflow: hidden;
      position: absolute;
      width: 49px;
      height: 49px;
      margin-left: 18px;
      margin-top: 38px;
      border-color: #ffffff;
      border-style: solid;
      border-width: 1px;
      border-radius: 25px;
      left: 0;
      top: 0;
      img {
        width: 49px;
        height: 49px;
      }
    }
    .name {
      font-size: 20px;
      color: #fff;
      display: flex;
      overflow: hidden;
      position: absolute;
      width: 295px;
      height: auto;
      margin-top: 33px;
      margin-left: 80px;
      -webkit-flex-direction: row;
      flex-direction: row;
      left: 0;
      top: 0;
      display: flex;
      justify-content: space-between;
      p {
        margin-top: 15px;
        font-weight: 900;
        font-size: 20px;
      }
      span {
        .van-icon {
          margin: 0 11px;
          font-weight: 2;
        }
      }
    }

    .nav {
      position: absolute;
      bottom: 13px;
      ul {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 61px;
        width: 375px;
        padding: 0 10px;
        li {
          color: #fff;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 90px;
          height: 61px;

          p {
            font-size: 14px;
          }
          span {
            font-weight: 900;
            margin: 8px 0;
          }
        }
      }
    }
  }
}

/* 我的订单 */
.conter {
  height: 200px;
  width: 351px;
  margin: 10px auto;
  background-color: #fff;
  border-radius: 12px;
  .conter_h {
    height: 38px;
    border-bottom: 2px solid #f2f2f2;
    line-height: 38px;
    padding: 0 10px;
    span {
      font-weight: 800;
      font-size: 14px;
      float: left;
      color: rgb(51, 51, 51);
    }
    p {
      float: right;
      color: rgb(153, 153, 153);
    }
  }
}

.conter_c > ul {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #666;
    img {
      width: 29px;
      height: 29px;
      margin-bottom: 5px;
    }
  }
}
.conter_c {
  margin-top: 20px;
  padding: 0 20px;
}
.conter_f {
  width: 327px;
  height: 72px;
  margin: 10px auto;
  background-color: #f2f2f2;
  padding: 0 10px;
  color: #666;
  .logistics {
    height: 25px;
    padding: 5px 0;

    span {
      float: left;
    }
    p {
      float: right;
    }
  }
  .logistics_f {
    img {
      float: left;
      width: 33px;
      height: 33px;
      margin-right: 10px;
    }
    span {
      float: left;
      line-height: 33px;
    }
  }
}

.footer {
  height: 205px;
  width: 351px;
  margin: 10px auto;
  background-color: #fff;
  border-radius: 12px;
  .tool {
    height: 38px;
    border-bottom: 2px solid #f2f2f2;
    line-height: 38px;
    padding: 0 10px;
    span {
      font-weight: 800;
      font-size: 14px;
      float: left;
      color: rgb(51, 51, 51);
    }
    p {
      float: right;
      color: rgb(153, 153, 153);
    }
  }

  .tool_c > ul {
    padding-top: 25px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #666;
    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 87.75px;
      height: 100%;
    }
    img {
      width: 32px;
      height: 32px;
    }
  }
}
</style>